<route lang="json5">
{
  needLogin: true,
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '课程',
  },
}
</route>
<template>
  <view class="course-main">
    <!-- 顶部搜索栏 -->
    <view class="search-box">
      <wd-input
        v-model="searchValue"
        placeholder="输入考试名称"
        class="rounded-full pl-30rpx"
        clearable
        no-border
      >
        <template #suffix>
          <wd-button type="primary" size="small" class="search-btn ml-8rpx" @click="onSearch">
            搜索
          </wd-button>
        </template>
      </wd-input>
    </view>
    <view class="score-list">
      <!-- 骨架屏 -->
      <template v-if="loading && pageNum === 1">
        <wd-skeleton :row="3" animated />
      </template>
      <template v-else>
        <view
          class="score-item"
          v-for="(score, index) in scoreList"
          :key="index"
          :class="[score.score >= 60 ? 'border-l-4 border-primary' : 'border-l-4 border-[#ff3b30]']"
        >
          <view class="w-60rpx h-60rpx mr-30rpx">
            <wd-img class="w-full h-full" src="/static/images/icons/excellent.png" />
          </view>
          <view class="score-info">
            <view class="score-title text-34rpx font-medium ellipsis">
              {{ score.examPlanTitle }}
            </view>
            <view class="score-time text-22rpx text-gray-400">
              考试时间: {{ score.examStartTime }}
            </view>
          </view>
          <view
            :class="[
              'score-value text-26rpx font-bold bg-op-20',
              score.score >= 60 ? 'text-[#458AFE] bg-[#458AFE]' : 'text-[#F73A4A] bg-[#F73A4A]',
            ]"
          >
            {{ score.useDuration }}分
          </view>
        </view>
      </template>

      <!-- 添加加载状态和加载完成的提示 -->
      <wd-loadmore :state="state" @reload="loadMore" finished-text="已经全部加载完毕"></wd-loadmore>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'

import { getMyScoreList } from '@/service/edu'
// 搜索相关
const searchValue = ref('')

// 修改状态管理
const state = ref<'loading' | 'finished' | 'error'>('loading')
// 分页相关

const pageNum = ref(1)
const pageSize = ref(10)

const loading = ref(false)
const finished = ref(false)

// 获取成绩列表
const scoreList = ref<any[]>([])

// 获取成绩列表数据的方法
async function getInfoList(isLoadMore = false) {
  if (loading.value || (finished.value && isLoadMore)) return
  try {
    loading.value = true
    const params = {
      pageNum: pageNum.value,
      pageSize: pageSize.value,
      content: searchValue.value,
    }

    const data: any = await getMyScoreList(params)
    if (data?.code === 200) {
      const { rows = [], total = 0 } = data || {}

      if (isLoadMore) {
        scoreList.value = [...scoreList.value, ...rows]
      } else {
        scoreList.value = rows
      }

      // 判断是否加载完所有数据
      finished.value = scoreList.value.length >= total
      state.value = finished.value ? 'finished' : 'loading'
    }
  } catch (error) {
    console.error('获取成绩列表失败:', error)
    state.value = 'error'
  } finally {
    loading.value = false
  }
}

// 搜索方法
const onSearch = async () => {
  pageNum.value = 1
  finished.value = false
  state.value = 'loading'
  await getInfoList(false)
}

// 加载更多数据
const loadMore = async () => {
  if (!loading.value && !finished.value) {
    pageNum.value++
    await getInfoList(true)
  }
}

// 页面加载时获取数据
onLoad(async () => {
  await getInfoList(false)
})

// 监听页面滚动到底部
onReachBottom(() => {
  if (!loading.value && !finished.value) {
    loadMore()
  }
})
</script>

<style lang="scss" scoped>
.search-box {
  height: 70rpx;
  border: 1rpx solid #3670f7;
  border-radius: 999px;
  :deep(.wd-input__inner) {
    height: 70rpx;
    background-color: white;
    border-radius: 999px;
  }
  :deep(.wd-input__suffix) {
    display: flex;
    align-items: center;
    height: 70rpx;
    padding-right: 6rpx;
    font-size: 28rpx;
  }
}

.score-list {
  .score-item {
    display: flex;
    align-items: center;
    padding: 30rpx;
    margin-top: 20rpx;
    background: #fff;
    border-radius: 10rpx;
    transition: all 0.3s;

    &:active {
      transform: scale(0.98);
    }

    .score-info {
      flex: 1;
      margin-right: 20rpx;
    }
    .score-value {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 110rpx;
      height: 50rpx;
      border-radius: 30rpx;
    }
  }
}
:deep(.wd-divider) {
  justify-content: center;
  margin: 0;
}
:deep(.wd-divider::before) {
  display: none;
}
:deep(.wd-divider::after) {
  display: none;
}
.course-main {
  padding: 24rpx;
}
</style>
